<template>
  <el-dialog
    :title="dataForm.productName + '工序步骤'"
    :visible.sync="visible"
    :before-close="close"
    :close-on-click-modal="false"
    width="50%">

    <el-steps v-if="process.procedureList.length != 0" :active="active" >
      <el-step
        v-for="item in process.procedureList"
        :key="item.productProcessId"
        :title="item.procedureName">
      </el-step>
    </el-steps>

    <el-form style="margin-top: 15px;">
      <el-form-item label="所有工序">
        <el-tag
          v-for="tag in process.procedureList"
          :key="tag.productProcessId"
          :type="tag.isMain ? 'success' : ''"
          closable
          @click="setMain(tag)"
          style="cursor: pointer;"
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag.procedureName}}
        </el-tag>
        <el-select
          v-show="selectVisible"
          v-model="selectProcedure"
          ref="saveTagSelect"
          size="small"
          @change="addSelect"
          @blur="addSelect"
          filterable
          value-key="procedureId"
          placeholder="+"
          style="margin-left: 10px ;width: 100px;">
          <el-option
            v-for="item in allProcedureList"
            :key="item.procedureId"
            :label="item.procedureName"
            :value="item">
          </el-option>
        </el-select>
        <el-button v-show="!selectVisible" class="button-new-tag" size="small" @click="showSelect">+ 工序</el-button>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="danger" class="pan-btn danger-btn" @click="deleteProcess()">删 除</el-button>
      <el-button type="primary" class="pan-btn primary-btn" @click="dataFormSubmit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { isBlank } from '@/common/js/utils'
  import { CODE_OK } from '@/common/js/config'
  import { getProcedureList } from '@/api/procedure'
  import { getProductProcess,saveOrUpdateProductProcess,deleteProcess } from '@/api/product'
  export default {
    data() {
      return {
        visible: false,
        selectVisible: false,
        process: {
          procedureList: []
        },
        allProcedureList: [],
        selectProcedure: {
          procedureId: '',
          procedureName: ''
        },
        dataForm: '',
        active: 99
      }
    },
    props: ["childDataForm"],
    created() {
    	if (!isBlank(this.childDataForm)) {
    		this.dataForm = this.childDataForm
        this.getInfo()
        this.visible = true
    	}
    },
    methods: {
      getInfo() {
        const params1 = {
        	page: 1,
        	limit: 99999
        }
        getProcedureList(params1).then(res => {
        	if (res.code === CODE_OK) {
        		this.allProcedureList = res.page.list.map(item => {
              this.$set(item, 'isMain', false)
              return item
            })
            getProductProcess(params2).then(res => {
              if (res.code === CODE_OK) {
                this.process = res.process
                let noAdd = true
                for (let i=this.process.procedureList.length - 1,j=0; i>=j; i--) {
                  if (this.process.mainProcedureId == this.process.procedureList[i].procedureId && noAdd) {
                    this.$set(this.process.procedureList[i], 'isMain', true)
                    noAdd = false
                  }else{
                    this.$set(this.process.procedureList[i], 'isMain', false)
                  }
                }
              }else{
              	this.$message.error(res.msg)
              }
            })
        	}else{
        		this.$message.error(res.msg)
        	}
        })
        const params2 = {
          productId: this.dataForm.productId
        }
      },
      addSelect() {
        if (!isBlank(this.selectProcedure)) {
          this.process.procedureList.push(this.selectProcedure)
        }
        this.selectVisible = false
      },
      showSelect() {
        this.selectProcedure = ''
        this.selectVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagSelect.focus()
        })
      },
      setMain(procedure) {
        let p = JSON.parse(JSON.stringify(procedure))
        let name = procedure.procedureName
        let msg = '确定将工序【' + name + '】设置为货品【' + this.dataForm.productName + '】的最后工序，最后工序为此货品的只留样工序，报告书上的基础数据(产成品量、包装规格等)取自最后工序的数据，详情请联系管理员，是否继续'
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let index = this.process.procedureList.indexOf(procedure)
          this.process.procedureList.splice(index,1)
          for (let i=0,j=this.process.procedureList.length; i<j; i++) {
            this.process.procedureList[i].isMain = false
          }
          p.isMain = true
          this.process.procedureList.push(p)
        })
      },
      handleClose(procedure) {
        let index = this.process.procedureList.indexOf(procedure)
        this.process.procedureList.splice(index, 1)
      },
      close() {
      	this.$emit('close')
        this.$emit('refreshData')
      	this.visible = false
      },
      deleteProcess() {
        this.$confirm('确定删除此货品的所有工序流程', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            productId: this.dataForm.productId
          }
          deleteProcess(data).then(res => {
            if (res.code === CODE_OK) {
              this.close()
            }else{
              this.$message.error(res.msg)
            }
          })
        })
      },
      dataFormSubmit() {
        let arr = []
        for (let p of this.process.procedureList) {
          arr.push(p.procedureId)
          if (p.isMain) {
            this.process.mainProcedureId = p.procedureId
          }
        }
        if (!this.formVerdict()) {
          return
        }
        this.process.procedureIds = arr.join(',')
        saveOrUpdateProductProcess(this.process).then(res => {
          if (res.code === CODE_OK) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: this.close()
            })
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      formVerdict() {
        if (this.process.procedureList.length < 2) {
          this.$message.error('请选择至少两个工序')
          return false
        }
        if (isBlank(this.process.mainProcedureId)) {
          this.$message.error('请指定最后留样工序')
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
